<template>
	<view class="bgf9">
		<!--  -->
		<view class="Top">
			<view style="width: 100%;">
				<u-dropdown title-size="12px" style="padding-top: 10rpx;">
					<u-dropdown-item style="width:100%;z-index: 99;" v-model="value1" title="距离远近" :options="options1"></u-dropdown-item>
					<u-dropdown-item style="width:100%;" v-model="value2" title="出餐速度" :options="options2"></u-dropdown-item>
					<u-dropdown-item style="width:100%;" v-model="value2" title="订单金额" :options="options2"></u-dropdown-item>
					<u-dropdown-item disabled> </u-dropdown-item>
				</u-dropdown>
			</view>
			<view class="wid25">
				<image @click="SaoyiSao" src="../../../static/iconsys.png" mode=""></image>
			</view>
		</view>
		<!--  -->
		<view class="w345" v-for="item in 2" style="margin-top: 20rpx;">
			<view class="h49 fs14" style="height: 98rpx;line-height: 98rpx;">
				<!-- 订单金额 -->
				<text>订单金额：￥126.00</text>
				<!-- 订单编号 -->
				<!-- <text>订单编号：12346798</text> -->
				<text class="fs12" style="position: absolute;right: 5%;color: #A4A4A4;">待接单</text>
			</view>
			<view class="h49 fs13" style="height: 242rpx;">
				<view class="Shwz" style="margin-top: 28rpx;position: relative;">
					<image src="../../../static/b16c8652-8cd5-4c9d-a180-8ddf523503eb.png" mode=""></image>
					<text style="position: absolute;left: 60rpx;">海淀区栖霞路36号门面</text>
					<view class="fs12 Jl" style="width: 100%;position: absolute;top: 40rpx;">
						<text style="color: #FF2C2C;margin-left: 60rpx;">距离 800m</text>
						<image src="../../../static/iconfh.png" mode=""></image>
					</view>
				</view>
				<view class="Shwz" style="margin-top:60rpx;position: relative;">
					<image src="../../../static/41a54e35-1863-47b1-9580-01eebff61b00.png" mode=""></image>
					<text style="position: absolute;left: 60rpx;">海淀区栖霞路36号门面</text>
					<view class="fs12 Jl" style="width: 100%;position: absolute;top: 40rpx;">
						<text style="color: #FF2C2C;margin-left: 60rpx;">距离 800m</text>
						<!-- <image src="../../../static/iconfh.png" mode=""></image> -->
					</view>
				</view>
			</view> 
			<view class="h49 fs13" style="height: 180rpx; margin-top: 16rpx;">
				<view class="GRxx" style="position: relative;">
					<image class="JDtx fs13" src="../../../static/4a8323ca-7ccb-49dc-98f0-737a8713d565.png" mode=""></image>
					<text style="position: absolute;left: 60rpx; color: #333333;">李女士 188****4567</text>
					<image class="GRdh" src="../../../static/icondianhua.png" mode=""></image>
				</view>
				<view class="GRsd fs14" style="padding-top: 46rpx;position: relative;">
					<text>预计</text><text style="color: #FF2C2C;">52分钟内</text><text>送达</text>
					<view class="GRjiedan">接单</view>
				</view>
			</view>
		</view>
		<view style="height: 350rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: 1,
				value2: 2,
				value3: 3,
				options1: [{
						label: '默认排序',
						value: 1,
					},
					{
						label: '距离优先',
						value: 2,
					},
					{
						label: '价格优先',
						value: 3,
					}
				],
				options2: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
				options3: [{
						label: '去冰',
						value: 1,
					},
					{
						label: '加冰',
						value: 2,
					},
				],
			}
		},
		methods: {
			SaoyiSao(){
				uni.scanCode({
				    success: function (res) {
				        console.log('条码类型：' + res.scanType);
				        console.log('条码内容：' + res.result);
				    }
				});
			}
		}
	}
</script>

<style>
	.Top {
		height: 94rpx;
		background: #F9F9F9;
		display: flex;
		position: relative;
	}
	.wid25{
		width: 25%;
		height: 100%;
		background: #F9F9F9;
		z-index: 99;
		position: absolute;
		right: 0;
	}
	.Top image {
		width: 38rpx;
		height: 38rpx;
		position: absolute;
		right: 40%;
		top: 30rpx;
	}

	.w345 {
		width: 690rpx;
		margin: auto;
		border-radius: 10rpx;
		background: #FFFFFF;
	}

	.h49 {
		width: 90%;
		margin: auto;
		color: #333333;
		border-bottom: 1rpx solid #F5F5F5;
		position: relative;
	}

	.Shwz>image {
		width: 42rpx;
		height: 50rpx;
	}

	.Jl>image {
		width: 10rpx;
		height: 20rpx;
		position: absolute;
		right: 8%;
		top: 8rpx;
	}
	.JDtx{
		width: 38rpx;
		height: 38rpx;
	}
	.GRdh{
		width: 24rpx;
		height: 24rpx;
		position: absolute;
		right: 8%;
		top: 8rpx;
	}
	.GRjiedan{
		width: 204rpx;
		height: 54rpx;
		text-align: center;
		line-height: 54rpx;
		color: #FFFFFF;
		background: #24BC81;
		border-radius: 27rpx;
		position: absolute;
		right: 7%;
		top: 40rpx;
	}
</style>
